<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="20" style="padding: 10px">
      <el-col :span="6" style="background-color: #fff">
        <div class="chart-wrapper">
          <gender :genderList="genderList" />
        </div>
      </el-col>
      <el-col :span="6" style="background-color: #fff">
        <div class="chart-wrapper">
          <age :ageList="ageList" />
        </div>
      </el-col>
      <el-col :span="6" style="background-color: #fff">
        <div class="chart-wrapper">
          <qualification :xlPortraitList="xlPortraitList" />
        </div>
      </el-col>
      <el-col :span="6" style="background-color: #fff">
        <div class="chart-wrapper">
          <experience :experiencePortraitList="experiencePortraitList" />
        </div>
      </el-col>
    </el-row>
    <el-row
      class="chart-wrapper"
      :gutter="20"
      style="margin: 10px; background-color: #fff"
    >
      <el-col :span="14"
        ><AreaColumn :addressPortraitList="addressPortraitList"
      /></el-col>
      <el-col :span="10">
        <el-table :data="addressPortraitList" style="width: 100%;" border>
          <el-table-column
            prop="prop"
            type="index"
            label="排名"
            width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="name"
            label="地区"
            width="width"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="count"
            label="人数"
            width="width"
            align="center"
          >
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row
      class="chart-wrapper"
      :gutter="20"
      style="background-color: #fff; margin: 10px"
    >
      <el-col :span="14">
        <post :postPortraitList="postPortraitList" />
      </el-col>
      <el-col :span="10">
        <el-table :data="postPortraitList" style="width: 100%" border>
          <el-table-column type="index" prop="prop" label="排名" width="100">
          </el-table-column>
          <el-table-column prop="name" label="地区" width="width">
          </el-table-column>
          <el-table-column prop="count" label="人数" width="width">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row
      class="chart-wrapper"
      :gutter="20"
      style="background-color: #fff; margin: 10px"
    >
      <seekers :portraitList="portraitList" />
    </el-row>
    <el-row class="chart-wrapper" style="background-color: #fff; margin: 10px">
      <AddResume :addPortraitList="addPortraitList"/>
    </el-row>
  </div>
</template>

<script>
import gender from "./components/gender";
import age from "./components/age";
import experience from "./components/experience";
import qualification from "./components/qualification";
import AreaColumn from "./components/AreaColumn";
import post from "./components/post";
import seekers from "./components/seekers";
import AddResume from "./components/AddResume";
import {
  genderPortraitApi,
  agePortraitApi,
  xlPortraitApi,
  experiencePortraitApi,
  addressPortraitApi,
  postPortraitApi,
  portraitApi,
  addPortraitApi,
} from "@/api/portrait";
export default {
  name: "",
  components: {
    gender,
    age,
    experience,
    qualification,
    AreaColumn,
    post,
    seekers,
    AddResume,
  },
  data() {
    return {
      genderList: [],
      ageList: [],
      xlPortraitList: [],
      experiencePortraitList: [],
      addressPortraitList: [],
      postPortraitList: [],
      portraitList: [],
      addPortraitList: [],
    };
  },
  created() {
    this.genderPortrait();
    this.agePortrait();
    this.xlPortrait();
    this.experiencePortrait();
    this.addressPortrait();
    this.postPortrait();
    this.portrait();
    this.addPortrait();
  },
  watch: {},
  methods: {
    // 性别分布
    async genderPortrait() {
      const res = await genderPortraitApi();
      this.genderList = res.data;
    },
    // 年龄分布
    async agePortrait() {
      const res = await agePortraitApi();
      this.ageList = res.data;
    },
    // 学历分布
    async xlPortrait() {
      const res = await xlPortraitApi();
      this.xlPortraitList = res.data;
    },
    // 经验分布
    async experiencePortrait() {
      const res = await experiencePortraitApi();
      this.experiencePortraitList = res.data;
    },
    // 地区分布
    async addressPortrait() {
      const res = await addressPortraitApi();
      console.log(res);
      this.addressPortraitList = res.data;
    },
    // 岗位分布
    async postPortrait() {
      const res = await postPortraitApi();
      this.postPortraitList = res.data;
    },
    // 求职活跃度分析
    async portrait() {
      const res = await portraitApi();
      this.portraitList = res.data;
    },
    // 简历新增趋势
    async addPortrait() {
      const res = await addPortraitApi();
      this.addPortraitList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #fcfcfc;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 10px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.el-table {
  max-height: 400px; /* 限制表格的最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
